<template>
  <div style="display: flex; position: relative;">
    <div class="arrbox">
      <!-- 通过visible控制显示还是隐藏 -->
      <el-popover
      v-model="visible"
      placement="bottom-start"
      width="auto"
      >
      <div slot="reference" class="check-select">
        <!-- popper-append-to-body:不需要插入浮动元素,popper-class:设置类名并隐藏 -->
        <el-select
        ref="select"
        v-if="multiple"
        v-model="currentval"
        :style="{height:`${height}`}"
        multiple
        :placeholder="placeholder"
        :popper-append-to-body="false"
        popper-class="hide-popper"
        style="width:100%"
        @visible-change="visibleChange"
        @focus="getFocus"
        >
          <el-option
          v-for="item in selectItem"
          :key="`${item.id}_k`"
          :label="item.label"
          :value="item.id"
          />
        </el-select>
        <el-select
        ref="select"
        v-else
        v-model="currentval1"
        :style="{height:`${height}`}"
        :placeholder="placeholder"
        :popper-append-to-body="false"
        popper-class="hide-popper"
        style="width:100%"
        @visible-change="visibleChange"
        @focus="getFocus"
        >
          <el-option
          v-for="item in selectItem"
          :key="`${item.id}_k`"
          :label="item.label"
          :value="item.id"
          />
        </el-select>
      </div>
      <!-- selectBxClick让select强制选中 -->
      <div class="selectMain" :style="{'min-width':`${width-20}px`}" @click="selectBxClick">
        <div class="seachButton">
          <el-input v-model="seachValue" placeholder="请输入名称进行筛选"></el-input>
        </div>
        <div class="selectDiv">
          <div class="selectDivAuto">
            <div v-for="item in list" :key="item.value" class="list" :class="[currentval.indexOf(item.id)!=-1?'selected':'']" @click="clickItem(item)">{{ item.label }}</div>
          </div>
        </div>
      </div>
      </el-popover>
    </div>
    <div @click="userHandle" class="userBox"><i :class="isUser === 'unit' ? 'el-icon-postcard' : isUser === 'department' ? 'el-icon-guide' : isUser === 'company' ? 'el-icon-office-building' : 'el-icon-user'"></i></div>
    <formTransfer :transferDialog="transferDialog" :multiple="multiple" :isUser="isUser" :currentval="selectItem" @ransferData="ransferDataHandle"  />
  </div>
</template>

<script>
  import FormTransfer from "@/components/form/transfer";
  // 模拟获取的数据
	export default {
    components: { FormTransfer },
    model: {
      prop: 'parentArr',
      event: 'change-parentArr'
    },
    props: {
      parentArr: {
        type: Array,
        default() {
          return []
        }
      }, // 值
      parentSelectItem: {
        type: Array,
        default() {
          return []
        }
      }, // 值数组
      width: {
        type: Number,
        default: 180
      },
      height: {
        type: Number,
        default: 30
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      multiple: {
        type: Boolean,
        default: false
      }, //默认单选
      isUser: {
        type: String,
        default: 'user'
      }, // user:人员，unit:职位，department:部门,company:单位

    },
    data() {
      return {
        seachClickList: [],
        visible: false,
        currentval: [],
        currentval1: '',
        list: [],
        selectItem: [],
        seachValue: '',
        transferDialog: false
      }
    },
    watch: {
      seachValue: {
        handler(value) {
          if (this.isUser) {
            this.seachClickList = [{
              label: '秦院',
              unit: '总经理',
              shortCompany: '远望设计',
              id: 1,
              companyId: 11
            }, {
              label: '张国庆',
              unit: '总经理',
              shortCompany: '远望设计',
              id: 2,
              companyId: 11
            }, {
              label: '综合管理员',
              unit: '(兼)主任',
              shortCompany: '远望集团总部',
              id: 3,
              companyId: 11
            }]
          } else {
            this.seachClickList = [{
                label: '总经办',
                id: 11,
                parentId: 1,
              }, {
                label: '远望勘察设计有限责任公司',
                id: 21,
                parentId: 1,
              }, {
                label: '综合办公室',
                id: 211,
                parentId: 21
            }]
          }
          this.getList(value)
        },
        deep: true,
        immediate: true
      },
      parentArr: {
        handler(value) {
          this.currentval = value
        },
        deep: true,
        immediate: true
      },
      parentSelectItem: {
        handler(value) {
          this.selectItem =  value
        },
        deep: true,
        immediate: true
      },
      currentval: {
        handler(value) {
          this.$emit('change-parentArr', value)
        }
      }
    },
    mounted() {},
    methods: {
      getList(value) {
        if (value) {
          this.list = this.seachClickList.filter(item => item.label.indexOf(value) > -1)
        } else {
          this.list = this.seachClickList
        }
        this.getSelectItem()
      },
      // 获取选中的item
      getSelectItem() {
        const noItemList = this.currentval.map(n => {
          if (this.selectItem.findIndex(i => i.id == n) == -1) {
            return n
          }
          return null
        }).filter(n => n != null)
        noItemList.forEach(item => {
          const index = this.list.findIndex(i => i.id == item)
          if (index != -1) {
          this.selectItem.push(this.list[index])
          }
        })
      },
      getFocus() {
        this.visible = true
      },
      visibleChange(data) {
        this.visible = data
      },
      selectBxClick() {
        // 避免点击框体时组件消失
        this.$refs.select.visible = true
      },
      // 选择
      clickItem(item) {
        const index = this.currentval.indexOf(item.id)
        if (index == -1) {
          if (this.multiple) {
            this.currentval.push(item.id)
            this.selectItem.push(item)
          } else {
            this.selectItem = [item]
            this.currentval1 = item.id
          }
        } else {
          const itemIndex = this.selectItem.findIndex(n => n.id == item.id)
          this.selectItem.splice(itemIndex, 1)
          this.currentval.splice(index, 1)
        }
      },
      ransferDataHandle(e) {
        this.transferDialog = e.transferDialog
        this.selectItem = e.list
        if (this.multiple) {
          this.currentval = []
          e.list.forEach(item => {
            this.currentval.push(item.id)
          })
        } else {
          this.currentval1 = e.list[0].id
        }
        console.log(this.selectItem,  this.currentval,this.currentval1 )
      },
      userHandle() {
        this.transferDialog = true
        this.visible = false
      }
    }
	}
</script>

<style lang="scss" scoped>
  .arrbox {
    width: 100%;
    display: inline-block;
  }
  .check-select{
    ::v-deep.hide-popper{
      display: none;
    }
  }
  .userBox {
    width: 20px;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 0;
  }
  .el-icon-user, .el-icon-postcard, .el-icon-office-building, .el-icon-guide {
    font-size: 20px;
    color: #409EFF;
    cursor: pointer;
  }
  ::v-deep .el-input__suffix{
    i:not(.el-select__caret){
      display: none;
    }
  }
  .selectMain {
    width: 100%;
    height: 100%;
  .seachButton{
    width: 100%;
    align-items: center;
    display: flex;
    div.btn{
      width: 25%;
      max-width: 70px;
      max-width: 80px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #fff;
      background-color: #409EFF;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .selectDiv{
    width: 100%;
    max-width: 500px;
    margin-top: 10px;
    padding:  0 10px 0 0;
    .list{
      width: 100%;
      padding: 10px 20px 10px 10px;
      color: #666;
      cursor: pointer;
      position: relative;
      &.selected{
        color: #409EFF;
        &::after{
          position: absolute;
          right: 0px;
          top: 50%;
          transform: translateY(-50%);
          font-family: element-icons;
          content: "\e6da";
          font-size: 12px;
          font-weight: 700;
          -webkit-font-smoothing: antialiased;
        }
      }
    }
    .selectDivAuto{
      width: calc(100% + 15px);
      max-height: 300px;
      overflow-y: auto;
      .list{
        padding: 10px 30px 10px 10px;
        &.selected::after{
          right: 10px;
        }
      }
    }
  }
  }
  .allCheck{
    border-bottom: 1px solid rgb(228, 225, 225);
  }
</style>
